
<template>
  <el-dialog
      v-model="compiledialogVisible"
      title="预警设置编辑"
      :close-on-click-modal="false"
      width="80%"
  >
  <div>
    <div>
      基本信息
    </div>
    <div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="200px">
        <!-- 标题 -->
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name" placeholder="请输入标题"></el-input>
        </el-form-item>
        <!-- 项目分类 -->
        <el-form-item label="项目分类" prop="projectTypeCode">
          <el-tree-select
              v-model="form.projectTypeCode"
              :data="projectTypeData"
              :props="treeProps"
              placeholder="请选择项目分类"
              clearable
              check-strictly
              node-key="id"
          />
        </el-form-item>
        <!-- 项目执行周期 -->
        <el-form-item label="项目执行周期" prop="executionCycle">
          <el-select v-model="form.executionCycle" placeholder="请选择项目执行周期" clearable>
            <el-option v-for="year in [1, 2, 3, 4, 5]" :key="year" :label="`${year} 年`" :value="year"></el-option>
          </el-select>
        </el-form-item>
        <!-- 预警触发条件：项目执行满 -->
        <el-form-item label="预警触发条件：项目执行满" prop="executionMonths">
          <el-select v-model="form.executionMonths" placeholder="请选择预警触发月数" clearable>
            <el-option v-for="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" :key="month" :label="`${month} 个月`" :value="month"></el-option>
          </el-select>
        </el-form-item>
        <!-- 经费执行进度小于 -->
        <el-form-item label="经费执行进度小于" prop="executionFee">
          <el-input v-model="form.executionFee" placeholder="请输入百分比%"></el-input>
        </el-form-item>
        <!-- 发送方式 -->
        <el-form-item label="发送方式" prop="sendMode">
<!--            <el-checkbox-group v-model="form.sendMode">-->
<!--              <el-checkbox-group v-model="form.sendMode">-->
<!--                <el-checkbox-->
<!--                    v-for="item in sendModeData"-->
<!--                    :key="item.id"-->
<!--                    :label="item.code"-->
<!--                    :disabled="item.code === 'systemRemind'"-->
<!--                >-->
<!--                  {{ item.name }}-->
<!--                </el-checkbox>-->
<!--              </el-checkbox-group>-->
<!--            </el-checkbox-group>-->
          <el-checkbox-group v-model="form.sendMode" >
            <el-checkbox label="业务信息" value="systemRemind" disabled :checked="true"></el-checkbox>
<!--            <el-checkbox label="邮件"></el-checkbox>-->
<!--            <el-checkbox label="短信"></el-checkbox>-->
          </el-checkbox-group>
        </el-form-item>
        <!-- 内容 -->
        <el-form-item label="内容" prop="sendContent">
          <el-input type="textarea" v-model="form.sendContent" placeholder="请输入内容" rows="4"></el-input>
        </el-form-item>
        <div class="red-text">
          <p>1.根据您设置的预警条件，系统将在每月6号上午10点执行预警功能，发送预警消息；</p>
          <p>2.邮件及短信提醒的成功发送依赖相关被发送人员的基本信息页面的邮箱及手机填写正确；</p>
          <p>3.@{XX}为系统默认预警参数，不允许修改，其中‘@{personName}’表示教师姓名，‘@{projectName}’表示项目名称。</p>
        </div>
        <!-- 提交按钮 -->
        <div class="sub-btn">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>

  </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {
  getCategory,
  edit,getAlarmSetInfo
} from './../../../api/money/yjxxApi'



const sendModeData = ref([])
const getCategorys = () => {
  getCategory({
    bizName: "通知方式"
  })
      .then((res)=>{
        sendModeData.value = res.data
      })
}
//下拉树
// 项目分类数据
const projectTypeData = ref([]);

// 树组件配置
const treeProps = {
  label: 'label',
  children: 'children'
};
const getxiangmufenleiOptions = function (){
  getCategory({
    'bizName':'项目分类（所有-有级联）'
  })
      .then((res)=>{
        projectTypeData.value = res.data
      })
}

const compiledialogVisible = ref(false)
const openaddDialog = function (row){
  compiledialogVisible.value = true
  getCategorys()
  getxiangmufenleiOptions()
  getAlarmSetInfo({id:row.id})
      .then((res)=>{
        if(res.code == 200){
        form.value =res.data
          form.value.sendMode = form.value.sendMode.split(',');
        }
      })
}
import { ref } from 'vue';
import {ElMessage} from "element-plus";
// 表单数据
const form = ref({
  name: '',
  projectTypeCode: '',
  executionCycle: '1',
  executionMonths: '',
  executionFee: '',
  sendMode: ['systemRemind'],
  sendContent: '@{personName} 老师：您好！您的项目“@{projectName}”预算经费执行进度过慢，请您尽快处理，感谢您的配合！'
});
// 自定义验证函数：验证经费执行进度不超过 100
const validateExecutionFee = (rule, value, callback) => {
  if (value && parseFloat(value) > 100) {
    callback(new Error('经费执行进度不能超过 100%'));
  } else {
    callback();
  }
};
// 表单验证规则
const rules = ref({
  // executionFee: [
  //   { validator: validateExecutionFee, trigger: 'blur' }
  // ],
  name: [
    { required: true, message: '标题为必填项', trigger: 'blur' }
  ],
  projectTypeCode: [
    { required: true, message: '项目分类为必填项', trigger: 'change' }
  ],
  sendContent: [
    { required: true, message: '内容为必填项', trigger: 'blur' }
  ]
});

// 表单引用
const formRef = ref(null);
//调用父组件刷新列表方法
const emits = defineEmits(['compilesubmit-form']);
// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const newFormData = { ...form.value };
      newFormData.sendMode = newFormData.sendMode.join(',');
      edit(newFormData)
          .then((res)=>{
            if(res.code == 200){
              ElMessage({
                message: res.msg,
                type: 'success',
              })
              compiledialogVisible.value = false
              resetForm()
              emits('compilesubmit-form');
            }else {
              ElMessage({
                message: res.msg,
                type: 'error',
              })
            }
          })
      console.log('表单数据：', form.value);
      // 这里可以添加提交表单到后端的逻辑
    } else {
      console.log('表单验证失败');
    }
  });
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
  form.value.sendMode = ['systemRemind'];
  form.value.sendContent = '@{personName} 老师：您好！您的项目“@{projectName}”预算经费执行进度过慢，请您尽快处理，感谢您的配合！';
};
defineExpose({
  openaddDialog
})
</script>

<style scoped lang="scss">
.red-text{
  color: red;
  text-align: center;
}
.sub-btn{
  display: flex;
  justify-content: center;
  gap: 10px; /* 设置按钮之间的间距 */
  margin-top: 20px;
}
.button-container el-button {
  margin: 0 5px;
}
</style>